<template>
    <div class="date-range-picker">
        <el-date-picker v-model="dateArray" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="changeDate" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
    </div>
</template>

<script setup lang="js">
import { ref, watch } from "vue";

// 定义属性和事件
const props = defineProps({
    startTime: {
        type: String,
        required: true,
    },
    endTime: {
        type: String,
        required: true,
    },
});

const emit = defineEmits(["update:startTime", "update:endTime"]);

// 内部日期范围绑定
const dateArray = ref([props.startTime, props.endTime]);

// 同步外部值与内部状态
watch(
    () => [props.startTime, props.endTime],
    ([newStart, newEnd]) => {
        dateArray.value = [newStart, newEnd];
    },
    { immediate: true }
);

// 处理日期变化
const changeDate = (value) => {
    emit("update:startTime", value[0]);
    emit("update:endTime", value[1]);
};
</script>

<style scoped lang="scss">
.date-range-picker {
    :deep(.el-date-editor) {
        width: vw(400);
    }
}
</style>